<template>
	<view class="container">

		<button class="avatar-wrapper" open-type="chooseAvatar" @click="onChooseAvatar">
			<image :src="headimgUrl" class="headimg" mode="aspectFill"></image>
			<view class="edit-text">修改头像</view>
		</button>

		<view class="input-c">
			<view class="s-title">昵称：</view>
			<!-- {{name}} -->
			<input type="nickname" @blur="inputChange" class="input" v-model="name" placeholder="请输入昵称" />
		</view>
		<!-- <input type="nickname" class="weui-input" placeholder="请输入昵称"/> -->

		<view class="submit-btn" @tap="submit">确认更新</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"

	export default {
		name: "center",
		components: {},
		data() {
			return {
				headimgUrl: '',
				name: ''
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
		onLoad() {
			this.$store.dispatch("getUserInfo").then(res => {
				this.headimgUrl = this.userInfo.headimg
				if (this.userInfo.name != '微信用户') {
					this.name = this.userInfo.name
				}
			})
		},
		onShow() {},
		methods: {
			inputChange(res) {
				this.name = res.detail.value
				// console.log('input change =====>', res)
			},
			onChooseAvatar() {
				this.$upload.select({
					count: 1,
					sizeType: ['compressed'],
				}, urls => {
					this.headimgUrl = urls[0]
				})
			},
			submit() {
				if (!this.headimgUrl) {
					uni.showToast({
						title: '请选择头像~',
						icon: 'none'
					})

					return false
				}

				if (!this.name) {
					uni.showToast({
						title: '请填写昵称~',
						icon: 'none'
					})

					return false
				}

				this.$http({
					url: '/user/update/user',
					method: 'POST',
					data: {
						name: this.name,
						headimg: this.headimgUrl,
					}
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '更新成功，跳转中~',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1300)
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url(../../static/bgColor.png) center/ cover no-repeat;
	}


	.headimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		display: block;
		// margin: 100rpx auto;
	}

	.name {}

	.avatar-wrapper {
		// border: 1px solid red;
		width: 200rpx;
		height: 200rpx;
		padding: 0rpx;
		margin: 100rpx auto;

		.edit-text {
			background: rgba(0, 0, 0, 0.3);
			color: white;
			text-align: center;
			position: absolute;
			bottom: 0rpx;
			width: 100%;
			font-size: 20rpx;
		}
	}

	button {
		background: transparent;

		&:after {
			display: none;
		}

		&:before {
			display: none;
		}
	}

	.input-c {
		display: flex;
		align-items: center;
		margin-top: 50rpx;
		height: 130rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		border: 2rpx solid rgb(108, 67, 255);
		background: url(../../static/boxCard.png) center/ cover no-repeat;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 90%;
		margin: 50rpx auto;

		.s-title {
			color: #fff;
			margin-right: 30rpx;
			margin-left: 30rpx;
			font-weight: 900;
			font-size: 38rpx;
		}

		input {
			font-weight: 100;
			color: #fff;
			font-size: 30rpx;
		}
	}

	.submit-btn {
		// position: fixed;


		width: 90%;
		height: 96rpx;
		line-height: 96rpx;
		margin: 50rpx auto;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		background: url(../../static/seach.png) center/ cover no-repeat;
		color: #fff;
		font-weight: 900;
	}
</style>